<template>
  <div style="display: flex;">
    <div id="container" />
    <!-- <button class="button" @click="getCenter">获取位置</button> -->
    <!-- <div>经度：{{ location.latLng ? location.latLng.lat : '' }}</div>
    <div>纬度：{{ location.latLng ? location.latLng.lng : '' }}</div> -->
  </div>
</template>

<script
  charset="utf-8"
  src="http://map.qq.com/api/js?v=2.exp&key=NYGBZ-R4U6P-MWSDO-VTMMU-ZH5M7-XKBE6"
></script>

<script>
  export default {
    name: 'Tencentmap',
    data() {
      return {
        location: {}
      }
    },
    mounted() {
      this.loadScript()
      // this.setLabel()
    },
    methods: {
      initMap() {
        // 定义地图中心点坐标
        this.center = new TMap.LatLng(39.983522, 116.30669)
        // 定义map变量，调用 TMap.Map() 构造函数创建地图
        this.map = new TMap.Map(document.getElementById('container'), {
          center: this.center, // 设置地图中心点坐标
          zoom: 18.8, // 设置地图缩放级别
          pitch: 43.5, // 设置俯仰角
          rotation: 317.8, // 设置地图旋转角度
          // mapStyleId: 'style0',
          baseMap: {
            //底图设置（参数为：VectorBaseMap对象）
            type: 'vector', //类型：失量底图
            features: ['base', 'building3d']
          }
        })
        var label = new TMap.MultiLabel({
          id: 'label-layer',
          map: this.map,
          styles: {
            label: new TMap.LabelStyle({
              color: '#3777FF', //颜色属性
              size: 20, //文字大小属性
              offset: { x: 0, y: 0 }, //文字偏移属性单位为像素
              angle: 0, //文字旋转属性
              alignment: 'center', //文字水平对齐属性
              verticalAlignment: 'middle' //文字垂直对齐属性
            })
          },
          geometries: [
            {
              id: 'label', //点图形数据的标志信息
              styleId: 'label', //样式id
              position: new TMap.LatLng(39.98416260566361, 116.30756252116907), //标注点位置
              content: '办公大楼', //标注文本
              properties: {
                //标注点的属性数据
                title: 'label'
              }
            },
            {
              id: 'label', //点图形数据的标志信息
              styleId: 'label', //样式id
              position: new TMap.LatLng(39.98317698056327, 116.30767256806587), //标注点位置
              content: '仓库', //标注文本
              properties: {
                //标注点的属性数据
                title: 'label'
              }
            },
            {
              id: 'label', //点图形数据的标志信息
              styleId: 'label', //样式id
              position: new TMap.LatLng(39.98386659608572, 116.30647479989182), //标注点位置
              content: '车间一', //标注文本
              properties: {
                //标注点的属性数据
                title: 'label'
              }
            },
            {
              id: 'label', //点图形数据的标志信息
              styleId: 'label', //样式id
              position: new TMap.LatLng(39.983644143792404, 116.30651918934404), //标注点位置
              content: '车间二', //标注文本
              properties: {
                //标注点的属性数据
                title: 'label'
              }
            }
          ]
        })
        let path1 = [
          [39.98393252550906, 116.30627450631482],
          [39.98369341383136, 116.30634812393714],
          [39.983792741184416, 116.30659382854355],
          [39.983973835217924, 116.30652076091599]
        ]
        let path2 = [
          [39.983548277076146, 116.30670089396449],
          [39.983792741184416, 116.30659382854355],
          [39.98368793011188, 116.30634767857396],
          [39.983502008083406, 116.30640695517786]
        ]
        path1 = path1.map(p => {
          return new TMap.LatLng(p[0], p[1])
        })
        path2 = path2.map(p => {
          return new TMap.LatLng(p[0], p[1])
        })

        //初始化polygon
        var polygon = new TMap.MultiPolygon({
          id: 'polygon-layer', //图层id
          map: this.map, //设置多边形图层显示到哪个地图实例中
          //多边形样式
          styles: {
            polygon: new TMap.ExtrudablePolygonStyle({
              color: 'rgba(0,125,255,0.7)', //面填充色
              showBorder: true, //是否显示拔起面的边线
              extrudeHeight: 13, //多边形拔起高度
              borderColor: 'rgba(0,125,255,1)' //边线颜色
            }),
            polygon2: new TMap.ExtrudablePolygonStyle({
              color: 'rgba(125,0,255,0.7)', //面填充色
              showBorder: true, //是否显示拔起面的边线
              extrudeHeight: 16, //多边形拔起高度
              borderColor: 'rgba(125,0,255,1)' //边线颜色
            })
          },
          //多边形数据
          geometries: [
            {
              id: 'p1', //该多边形在图层中的唯一标识（删除、更新数据时需要）
              styleId: 'polygon', //绑定样式名
              paths: path1 //多边形轮廓
            },
            {
              id: 'p2', //该多边形在图层中的唯一标识（删除、更新数据时需要）
              styleId: 'polygon2', //绑定样式名
              paths: path2 //多边形轮廓
            }
          ]
        })
        this.map.on('click', evt => {
          this.location = evt
          console.log(evt)
        })
      },
      getCenter() {
        var mapCenter = this.map.getCenter() //获取地图中心点坐标
        var mapZoom = this.map.getZoom()
        var mapPitch = this.map.getPitch()
        var mapRotation = this.map.getRotation()
        console.log(
          '当前地图中心为: ' +
            mapCenter.getLat().toFixed(6) +
            ',' +
            mapCenter.getLng().toFixed(6)
        )
        console.log('放大倍数为：' + mapZoom)
        console.log('旋转角度为：' + mapRotation)
        console.log('俯视角度为：' + mapPitch)
      },
      loadScript() {
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.src =
          'https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=init'
        script.onload = script.onreadystatechange = () => {
          if (
            !this.readyState ||
            this.readyState === 'loaded' ||
            this.readyState === 'complete'
          ) {
            this.initMap()
            script.onload = script.onreadystatechange = null
          }
        }
        document.body.appendChild(script)
      }
    }
  }
</script>

<style scoped>
  #container {
    /* 地图(容器)显示大小 */
    width: 100%;
    height: 100%;
  }
</style>
